<!-- 表格单选 -->

<template>
  <div class="flex1">
    <OurTitle v-bind="$props" />

    <div class="QuestionnaireList-table">
      <draggable v-model="obj.optionList" :animation="200" class="flex" draggable=".flex1">
        <div class="flex2" />
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">
          <OurTableOption :obj="option" />
        </div>
        <div class="flex0">
          <BtnText v-if="hasAdd" :title="`${CORE.MAP.TIP_ADD}选项`" :disabled="isShow" @click="toAdd" />
        </div>
      </draggable>

      <draggable v-model="obj.questionList" :animation="200">
        <div v-for="question in obj.questionList" :key="question.key" class="flex">
          <div class="flex2">
            <OurTableTitle :obj="question" />
          </div>
          <div v-for="option in obj.optionList" :key="option.key" class="flex1">
            <el-radio :value="false" disabled>{{ option.label }}</el-radio>
          </div>
          <div class="flex0">
            <BtnText v-if="hasDelQuestion" :title="`${CORE.MAP.TIP_DEL}问题`" red @click="toDelQuestion" />
          </div>
        </div>
      </draggable>

      <div v-if="!isShow" class="flex">
        <div class="flex2"><BtnText :title="`${CORE.MAP.TIP_ADD}问题`" @click="toAddQuestion" /></div>
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">
          <BtnText v-if="obj.optionList.length !== 1" :title="`${CORE.MAP.TIP_DEL}选项`" red @click="toDel" />
        </div>
        <div class="flex0" />
      </div>
    </div>

    <div class="QuestionnaireList-flex">
      <div class="QuestionnaireList-remark">底部备注</div>
      <OurRemark v-bind="$props" />

      <div style="width: 248px" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadio from '../MyRadio'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadio, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyRadioTable',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 有无新增按钮
     */
    hasAdd() {
      return !this.isShow && this.obj.optionList.length < 4
    },

    /**
     * 有无删除问题按钮
     */
    hasDelQuestion() {
      return !this.isShow && this.obj.questionList.length !== 1
    },

    /**
     * 标记
     */
    marks: MyRadio.computed.marks,
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听选项列表
     */
    'obj.optionList'() {
      this.resetOptionNo()
    },

    /**
     * 监听子问题列表
     */
    'obj.questionList'() {
      this.resetQuestionNo()
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    !this.obj.optionList.length && this.toAdd()
    !this.obj.questionList.length && this.toAddQuestion()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MyRadio.methods,

    /**
     * 添加问题
     */
    toAddQuestion() {
      this.obj.questionList.push({
        ...CORE.clone(this.MAP.TYPE),
        type: this.$options.name.slice(2, -5).toLowerCase(),
        id: '', // ID 为空，以 key 为唯一标识
        key: `${Date.now()}`,
      })
    },

    /**
     * 删除问题
     */
    toDelQuestion(index) {
      this.obj.questionList.splice(index, 1)
    },

    /**
     * 重置选项题号
     */
    resetOptionNo() {
      this.obj.optionList.forEach((option, i) => {
        option.no = i + 1
        if (this.obj.type !== 'textareaTable') option.label = String.fromCharCode(i + 65)
      })
    },

    /**
     * 重置子问题题号
     */
    resetQuestionNo() {
      this.obj.questionList.forEach((question, i) => {
        if (question.no !== i + 1) question.no = i + 1
      })
    },
  },
})
</script>
